<template>
  <div class="home_box">

    <!-- 弹出框 -->
    <move-view width="90%" height="95%" :show="isOpenView" @closeView="onClickClose">
      <table-news v-if="isOpenView" :id="openViewID.id" :title="openViewID.title" @clickBtn="onClickBtnOpenNew" @clickImgBtn="onClickBtnOpenImg"/>
    </move-view>

    <!-- 二级弹出框 -->
    <move-view width="60%" height="95%" :show="isOpenNews" @closeView="onClickCloseNews" :tit="openViewID.title">
      <NewsInfo v-if="isOpenNews" :title="openViewID.title" :type="openViewID.type"></NewsInfo>
    </move-view>

    <!-- 二级图片视频弹出框 -->
    <move-view width="70%" height="500px" :show="isOpenImg" @closeView="onClickCloseImg" :tit="openViewID.title+'（图片/视频）'">
      <ImgInfo v-if="isOpenImg" :type="openViewID.type"></ImgInfo>
    </move-view>

    <!-- 转化利用弹出框 -->
    <move-view width="80%" height="95%" :show="isOpenChange" @closeView="onClickCloseChange" :tit="openViewID.title">
      <ChangeUseTable v-if="isOpenChange" @clickOpenChangeInfo="onClickOpenChangeInfo"></ChangeUseTable>
    </move-view>

    <!-- 转化利用详情页弹出框 -->
    <move-view width="60%" height="95%" :show="isOpenChangeInfo" @closeView="onClickCloseChangeInfo">
      <ChangeUseInfo v-if="isOpenChangeInfo" :id="openChangeInfoID"></ChangeUseInfo>
    </move-view>

    <img class="home_bg"
         src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210523/1621747080685.png"
         alt="">
    <img class="home_bg"
         src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210523/1621747080685.png"
         alt="">

    <!-- 头部 -->
    <header-box />

    <div class="home_content">
      <div class="home_left">
        <gene-box>
          <index />
        </gene-box>
        <gene-box title="总体情况"
                  style="flex:1">
          <state />
        </gene-box>
        <gene-box title="产生年代"
                  style="flex:1">
          <year />
        </gene-box>
      </div>

      <div class="home_center">
        <gene-box :title="hoverCityNub.name?hoverCityNub.name:'杭州市'"
                  class="home_center_nub_box"
                  height="auto"
                  size="18px"
                  bold="bold">
          <p class="city_name">文化元素总数</p>
          <ul class="city_number">
            <li class="city_number_bg"
                v-for="(n,nindex) in [1,2,3,4,5]"
                :key="nindex">
              {{ hoverCityNub.value | filtersNumber(nindex) }}
            </li>
          </ul>
          <p class="city_name">重点元素清单数</p>
          <ul class="city_number">
            <li class="city_number_bg"
                v-for="(n,nindex) in [1,2,3,4,5]"
                :key="nindex">
              {{ hoverCityNub.impCount | filtersNumber(nindex) }}
            </li>
          </ul>
          <p class="city_name">基因解码完成数</p>
          <ul class="city_number">
            <li class="city_number_bg"
                v-for="(n,nindex) in [1,2,3,4,5]"
                :key="nindex">
              {{ getNewOverCount | filtersNumber(nindex) }}
            </li>
          </ul>
        </gene-box>
        <map-box :mapList="mapList"
                 @changeCity="changeCity" />
        <img class="home_center_bg"
             src="https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210521/1621586402751.png"
             alt="">
      </div>

      <div class="home_right">
        <gene-box :title="``"
                  style="flex:.4">
          <template #title>
            <span style="fontWeight:bold;fontSize:17px">{{ hoverCityNub.name }}</span>
          </template>
          <btn-box :city="hoverCityNub.name" @changeBtn="changeBtn"/>
        </gene-box>
        <gene-box title="文化元素清单"
                  style="flex:1"
                  v-if="!isJIANGAN">
          <table-box :th="cemainTH"
                     :td="cemainTD"
                     :page="cemainPage"
                     @tableMouse="tableMouse"
                     @scrollDown="scrollDownCemain"/>
        </gene-box>
        <gene-box title="重点元素列表"
                  style="flex:1">
          <table-box :th="cedeTH"
                     :td="cedeTD"
                     :page="cedePage"
                     @tableMouse="tableMouseCede"
                     @scrollDown="scrollDownCede"
                     @openView="onClickTable" />
        </gene-box>
        <gene-box title="转换利用项目"
                  style="flex:1"
                  v-if="isJIANGAN"
                  @clickTit="onClickChangeTable">
          <table-box :th="changeTH"
                     :td="changeTD"
                     :page="cemainPage"
                     @tableMouse="tableMouseChange"
                     @scrollDown="scrollDownCemain"
                     @openView="onClickChangeInfo"/>
        </gene-box>

        <tag-box :tagXY="tagXY"
                 @tagMouseover="isTagHover=true"
                 @tagMouseleave="tagMouseleave"
                 class="cemain_tag_box"
                 width="350">
          <ul v-if="cemainTD[tag]&&!type" class="cemain_tag_ul">
            <li>
              <div class="img_list">
                <el-carousel indicator-position="outside">
                  <el-carousel-item v-for="(i,index) in getImgUrl" :key="index">
                    <img  :src="`${i.response.url}?x-oss-process=image/resize,m_fill,w_320,h_320,limit_0`" alt="">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </li>
            <li>
              <p>名称</p><span>{{ cemainTD[tag].CEName }}</span>
            </li>
            <li>
              <p>类别代码</p><span>{{ cemainTD[tag].CECode }}</span>
            </li>
            <li>
              <p>类别字典</p><span>{{ CEFormText(cemainTD[tag].CEForm,0) }}</span>
            </li>
            <li>
              <p>产生年代</p><span>{{ cemainTD[tag].CEYears }}</span>
            </li>
            <li>
              <p>常见/罕见</p><span>{{ cemainTD[tag].CECjhj }}</span>
            </li>
            <li>
              <p>保护情况字典</p><span>{{ CEFormText(cemainTD[tag].CEItemForm,1) }}</span>
            </li>
            <li>
              <p>地区</p><span>{{ cemainTD[tag].UserName }}</span>
            </li>
          </ul>

          <ul v-if="cedeTD[tag]&&type===1" class="cemain_tag_ul">
            <li>
              <p>名称</p><span>{{ cedeTD[tag].DecodeName }}</span>
            </li>
            <li>
              <p>地区</p><span>{{ cedeTD[tag].UserName }}</span>
            </li>
            <span style="display:block" v-for="(c,cIndex) in cedeTD[tag].childrenList" :key="cIndex"><div class="circular"></div>{{ c }}</span>
          </ul>

          <ul v-if="changeTD[tag]&&type===2" class="cemain_tag_ul">
            <li>
              <div class="img_list">
                <el-carousel indicator-position="outside">
                  <el-carousel-item v-for="(i,index) in changeTD[tag].UploadFile" :key="index">
                    <img  :src="`${i.url}?x-oss-process=image/resize,m_fill,w_320,h_320,limit_0`" alt="">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </li>
            <li>
              <p>名称</p><span>{{ changeTD[tag].Title }}</span>
            </li>
            <li>
              <p>建设情况</p><span>{{ changeTD[tag].Ptype }}</span>
            </li>
          </ul>

        </tag-box>

      </div>
    </div>

  </div>
</template>

<script>
import HeaderBox from '../components/Header'
import GeneBox from '../components/GeneBox'
import Index from '../pages/homePages/Index'
import State from '../pages/homePages/State'
import Year from '../pages/homePages/Year'
import BtnBox from '../pages/homePages/CityBtn.vue'
import MapBox from '../pages/homePages/Map'
import TableBox from '../components/TableBox'
import TagBox from '../components/TagBox'
import CEForm from '../utils/CEForm'
import CEItemForm from '../utils/CEItemForm'
import AreaCode from '../utils/AreaCode'
import MoveView from '../components/MoveView.vue'
import TableNews from './homePages/TableNews.vue'
import NewsInfo from './homePages/NewsInfo.vue'
import ImgInfo from './homePages/ImgInfo.vue'
import ChangeUseTable from './homePages/ChangeUseTable.vue'
import ChangeUseInfo from './homePages/ChangeUseInfo.vue'
export default {
  name: 'Home',
  components: {
    HeaderBox,
    GeneBox,
    Index,
    State,
    Year,
    BtnBox,
    MapBox,
    TableBox,
    TagBox,
    MoveView,
    TableNews,
    NewsInfo,
    ImgInfo,
    ChangeUseTable,
    ChangeUseInfo
  },
  data() {
    return {
      cemainTH: [],
      cemainTD: [],
      cemainPage:0,
      cedeTD: [],
      cedeTH: [],
      cedePage:0,
      changeTH:[],
      changeTD:[],
      isJIANGAN:false,
      openChangeInfoID:'',//转化利用详情页ID
      isOpenChangeInfo:false,//转化利用详情页弹窗判断
      mapList: [],
      tagXY: { index: null },
      hoverCityNub: { name:'杭州市',value:'' ,city:'3301%'},
      hoverCityBtn:{},
      isTagHover: false,
      tag: {},
      type:0,
      isOpenView:false,
      isOpenNews:false,
      isOpenImg:false,
      isOpenChange:false,
      openViewID:{
        id:0,
        title:'',
        type:'info'
      },
      newOverCount:{
        "杭州市":71,
        "宁波市":45,
        "温州市":58,
        "湖州市":38,
        "嘉兴市":34,
        "绍兴市":41,
        "金华市":25,
        "衢州市":74,
        "舟山市":39,
        "台州市":41,
        "丽水市":51
      }//基因解码完成数本地数据
    }
  },
  created() {
    this.getCemainList()
    this.getCedeList()
    this.getChangeList()
  },
  computed: {
    CEFormText() {
      return (value, listJs) => {
        if (!this.cemainTD[this.tag]) return ''
        listJs == 0 ? (listJs = CEForm) : (listJs = CEItemForm)
        let CE = ''
        function cFrom(list, nV, n, CEFormList) {
          list.forEach((i) => {
            if (i.value === nV[n]) {
              CEFormList += '/' + i.label
              n++
              if (n >= nV.length) {
                return (CE = CEFormList)
              } else {
                cFrom(i.children, nV, n, CEFormList)
              }
            }
          })
        }
        cFrom(listJs, JSON.parse(value), 0, CE)
        return CE.substr(1)
      }
    },
    getNewOverCount(){
      for(var item in this.newOverCount){
        if(item==this.hoverCityNub.name){
          return this.newOverCount[item];
        }
      }
    },
    getImgUrl(){
      //console.log(JSON.parse(this.cemainTD[this.tag].CEDescribe))
      return JSON.parse(this.cemainTD[this.tag].CEDescribe);
    }
  },
  filters: {
    filtersNumber: (value, index) => {
      let arr = String(value).split('')
      for (let i = 0; i < 5; i++) {
        if (arr.length < 5) arr.unshift('0')
      }
      return value ? arr[index] : 0
    },
  },
  methods: {
    changeCity(c) {
      this.hoverCityNub = c
      this.hoverCityBtn = c
      this.cemainPage = 0
      this.cedePage = 0
    },
    changeBtn(n){
      this.cemainPage = 0
      this.cedePage = 0
      this.hoverCityBtn = n
      this.isJIANGAN = n.city==='330102' || n.city==='330104'
      this.getCemainList()
      this.getCedeList()
      this.getChangeList()
      //console.log(this.hoverCityBtn.city)
    },
    scrollDownCemain(){
      this.cemainPage+=1;
      this.getCemainList();
    },
    scrollDownCede(){
      this.cedePage+=1;
      this.getCedeList();
    },
    getCemainList() {
      if(!this.hoverCityBtn.city) return
      this.$api
        .getCemain({
          currCount: this.cemainPage,
          UserName: this.hoverCityBtn.city,
        })
        .then((res) => {
          if (res.data.code != 0) return
          let list = res.data.data;
          list.forEach((i,index)=>{
            i.UserName = this.cityName(i.UserName);
          })
          this.cemainTD = this.cemainPage=='0'?list:this.cemainTD.concat(list);
          //console.log(this.cemainTD)
          this.cemainTH = [
            { name: '名称', props: 'CEName' },
            { name: '类别代码', props: 'CECode' },
            { name: '地区', props: 'UserName' },
          ]
        })
    },
    getCedeList() {
      if(!this.hoverCityBtn.city) return
      this.$api
        .getCede({
          currCount: this.cedePage,
          UserName: this.hoverCityBtn.city,
        })
        .then((res) => {
          if (res.data.code != 0) return
          let list = res.data.data;
          list.forEach((i,index)=>{
            i.UserName = this.cityName(i.UserName);
            i.childrenList = [];
            if(i.mainDecodeList.length!=0){
              i.mainDecodeList.forEach((c,cndex)=>{
                i.childrenList.push(c.CEName);
              })
            }
          })
          if(this.cedePage=='0'){
            this.cedeTD = [];
            if(this.hoverCityBtn.city==='330602'){//绍兴排序
              list.forEach((i,index)=>{
                if(i.DecodeName==='大禹祭典'||i.DecodeName==='绍兴黄酒酿制技艺'||i.DecodeName==='徐渭青藤画派'||i.DecodeName==='清白泉'||i.DecodeName==='鲁迅故里'){
                  this.cedeTD.push(i);
                  list.splice(index,1);
                }
              })
            }
          }
          this.cedeTD = this.cedeTD.concat(list);
          this.cedeTH = [
            { name: '名称', props: 'DecodeName' },
            { name: '地区', props: 'UserName' },
          ]
        })
    },
    getChangeList(){
      if(!this.hoverCityBtn.city) return
      this.$api.getChange({
        UserName:this.hoverCityBtn.city
      }).then(res=>{
        //console.log(res)
        if (res.data.code != 0) return
        let arr = res.data.data
        arr.forEach(i=>{
          i.Ptype = i.Ptype=='0'?'已建':i.Ptype=='1'?'在建':'规划'
          i.UploadFile = JSON.parse(i.UploadFile)
        })
        this.changeTD = arr
        this.changeTH = [
          { name: '名称', props: 'Title' },
          { name: '建设情况', props: 'Ptype' },
        ]
      })
    },
    //鼠标移入展示浮窗
    tableMouse(m) {
      if (this.isTagHover) return
      this.tagXY = m
      this.tag = m.index;
      this.type = 0;
    },
    //鼠标移入展示浮窗
    tableMouseCede(m){
      if (this.isTagHover) return
      this.tagXY = m;
      this.tag = m.index;
      this.type = 1;
    },
    //鼠标移入展示浮窗
    tableMouseChange(m){
      if (this.isTagHover) return
      this.tagXY = m;
      this.tag = m.index;
      this.type = 2;
    },
    tagMouseleave() {
      this.isTagHover = false
      this.tableMouse({index:null})
    },
    cityName(UserName){
      let name = '';
      function changeAreaCode(code,list,n){
        list.some(i=>{
          if(String(i.value).substr(n*2,2) === String(code).substr(n*2,2) ){
            if( i.children && String(code).substr((n+1)*2,2)!='00' ){
              changeAreaCode(code,i.children,n+1);
            } else {
              name = i.label
              return;
            }
          }
        })
      }
      changeAreaCode(UserName,AreaCode.AreaZJ,0)
      return name;
    },
    onClickClose(){
      this.isOpenView = false
    },
    //点击表格打开页面
    onClickTable(id,title){
      this.openViewID = {
        id:id,
        title:title
      }
      this.isOpenView = true
    },
    onClickChangeTable(id,title){
      this.openViewID = {
        id:id,
        title:title
      }
      this.isOpenChange = true
    },


    //点击按钮打开二级页面
    onClickBtnOpenNew(t){
      this.isOpenNews = true;
      this.openViewID.type = t;
    },
    //关闭弹窗
    onClickCloseNews(){
      this.isOpenNews = false;
    },
    onClickCloseChange(){
      this.isOpenChange = false
    },

    //打开图片视频二级页面
    onClickBtnOpenImg(t){
      this.isOpenImg = true
      this.openViewID.type = t;
    },
    onClickCloseImg(){
      this.isOpenImg = false
    },

    //打开转化利用详情页
    onClickOpenChangeInfo(id){
      this.openChangeInfoID = id
      this.isOpenChangeInfo = true
    },
    onClickChangeInfo(DecodeID,tit,id){
      //console.log(id)
      this.openChangeInfoID = id
      this.isOpenChangeInfo = true
    },
    onClickCloseChangeInfo(){
      this.openChangeInfoID = ''
      this.isOpenChangeInfo = false
    }
  },
}
</script>

<style>
.home_box {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('https://big-file.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/img/2021/202105/20210520/1621486856243.jpg');
  overflow: hidden;
}
.home_bg {
  position: absolute;
  transform: translateX(-50%) rotate(0deg) scale(2);
  left: 50%;
  animation: roll 20s linear infinite;
}
@keyframes roll {
  0% {
    transform: translateX(-50%) rotate(0deg) scale(2);
  }
  50% {
    transform: translateX(-50%) rotate(180deg) scale(1);
  }
  100% {
    transform: translateX(-50%) rotate(360deg) scale(2);
  }
}

.home_content {
  width: 100%;
  height: calc(100% - 60px);
  padding: 15px;
  display: flex;
  flex-flow: row nowrap;
}
.home_center_nub_box {
  position: absolute !important;
  top: 100px;
  left: 50px;
  width: 200px;
}
.home_left,
.home_right {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  flex: 1;
}
.home_center {
  flex: 2;
  position: relative;
}
.home_center_bg {
  position: absolute;
  bottom: 0;
  transform: rotateX(180deg);
}
.home_right {
  flex: 1;
}

.city_name {
  font-size: 15px;
  text-align: center;
  color: #fff;
}
.city_number {
  width: 130px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 10px auto;
}
.city_number_bg {
  width: 22px;
  height: 55px;
  background: linear-gradient(to left top, #229bd2, #194483);
  font-size: 28px;
  text-align: center;
  line-height: 55px;
  color: #fff;
}

.cemain_tag_box {
  font-size: 15px;
}
.cemain_tag_box .cemain_tag_ul>li {
  margin-bottom: 10px;
  font-weight: 300;
  display: flex;
  flex-flow: row nowrap;
}
.cemain_tag_box li p {
  height: 25px;
  font-weight: bolder;
  background: linear-gradient(to left top, #229bd2, #194483);
  padding: 0 8px;
  text-align: center;
  border-radius: 5px;
  margin-right: 8px;
  flex-basis: 100px;
  font-size: 13px;
  line-height: 25px;
}
.cemain_tag_box li>span {
  flex: 1;
}
.img_list{
  flex: 1;
}
.circular{
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  display: inline-block;
  margin-right: 10px;
}
</style>
